<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            button.active{
                color: #fff;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <canvas id="c" width="800" height="600" style="border: 1px solid #ccc"></canvas>
        <hr>
        <button id="boldBtn"  type="button">粗线条</button>
        <button id="thinBtn" class="active" type="button">细线条</button>
        <button id="saveBtn" type="button">保存签名</button>
        <input type="color" name="" id="color" value="">
        <button id="clearBtn" type="button">橡皮擦</button>
        <button id="nullBtn" type="button">清空画布</button>


        <script>
            // 获取canvas
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')
            // 初始线条宽度
            ctx.lineWidth = 2;
            //连接处圆润
            ctx.lineJoin = 'round'
            //开端和结束也是圆润的
            ctx.lineCap = 'round'
            // let img = new Image()
            // img.src = '../image/flower.png'
            // img.onload = function(){

            //     ctx.drawImage(img,0,0,800,600)
            // }


            // 获取输入框和按钮
            const boldBtn = document.getElementById('boldBtn')
            const thinBtn = document.getElementById('thinBtn')
            const saveBtn = document.getElementById('saveBtn')
            const inputColor = document.getElementById('color')
            const clearBtn = document.getElementById('clearBtn')
            const nullBtn = document.getElementById('nullBtn')

            var isDraw = false;
            cnv.onmousedown = function () {
                isDraw = true;
                ctx.beginPath()
                let x = event.pageX - cnv.offsetLeft
                let y = event.pageY - cnv.offsetTop
                ctx.moveTo(x,y)
            }
            cnv.onmouseup = function(){
                isDraw = false;
                // ctx.closePath()
            }
            cnv.onmousemove = function(e){
                if(isDraw){
                    let x = event.pageX - cnv.offsetLeft
                    let y = event.pageY - cnv.offsetTop
                    ctx.lineTo(x,y)
                    ctx.stroke()
                }
            }

            boldBtn.onclick = function () {
                ctx.globalCompositeOperation = 'source-over';

                ctx.lineWidth = 20;
                boldBtn.classList.add('active')
                thinBtn.classList.remove('active')
                clearBtn.classList.remove('active')
            }
            thinBtn.onclick = function () {
                ctx.globalCompositeOperation = 'source-over';
                ctx.lineWidth = 2;
                thinBtn.classList.add('active')
                boldBtn.classList.remove('active')
                clearBtn.classList.remove('active')
            }

            clearBtn.onclick = function () {
                ctx.globalCompositeOperation = 'destination-out';
                ctx.lineWidth = 30
                clearBtn.classList.add('active')
                thinBtn.classList.remove('active')
                boldBtn.classList.remove('active')
            }

            nullBtn.onclick = function () {
                ctx.clearRect(0,0,800,600)

            }
            saveBtn.onclick = function(){
                var  urlData = cnv.toDataURL();
                var img = new Image();
                img.src = urlData;
                document.body.appendChild(img)
                var download = document.createElement('a')
                download.href = urlData;
                download.download = 'myIMG'
                download.click()
            }
            inputColor.onchange = function () {
                console.log(inputColor.value);
                ctx.strokeStyle = inputColor.value
            }

        </script>
    </body>
</html>
